<template>
  <div>
    <div @click="selectFile()" class="btn">选择图片</div>
    <image-cropper ref="imageCropper" :cropperConfig="cropperConfig" :callback="loadImage"></image-cropper>


    <img class="boxImg" v-for="(value, key) in images" :value="value" :key="key" :src="value" />
  </div>

</template>

<script>
  // import imageCropper from '../components/imageCropper'
  export default {
    name: "test2",
    components: {
      imageCropper
    },
    data () {
      return {
        images: [],
        cropperConfig: {
          width: 1,
          height: 1,
          quality: 0.7,
          maxWidth: 750
        }
      }
    },
    methods: {
      selectFile() {
        this.$refs.imageCropper.checkPhoto()
      },
      // 图片裁剪之后的回调
      loadImage (data) {
        console.log(data)
        this.images.push(data)
      },
      uploadImg () {
        alert('上传')
      }
    }
  }
</script>

<style scoped>
  .boxImg{
    width: 100px;
    height: 100px;
  }
</style>
